<template>
  <div class="wraper">
    <h1>我是School组件</h1>
    <h2>校名：{{name}}</h2>
    <h2>地址：{{address}}</h2>
    <button @click="showSchool">点我展示学校信息</button>
  </div>
</template>

<script>
  export default {
    name:'School',
    data() {
      return {
        name:'尚硅谷',
        address:'宏福科技园'
      }
    },
    methods: {
      showSchool(){
        alert(`${this.name}坐落于${this.address}`)
      }
    },
  }
</script>

<style scoped>
  .wraper {
    background-color: green;
    padding: 20px;
    box-shadow: 0 0 10px black;
  }
</style>